<template>
  	<section class="todoapp">
      <TodoHeader
      @addFn='addList'
      />
      <TodoMain
      :arr="showList"
      @delFn='delList'
      />
      <TodoFooter
      :arr="list"
      @changFn='changeList1'
      @clearFn='clearList'
      />
		
		</section>
</template>

<script>

import './assets/css/index.css'
import './assets/css/base.css'

import TodoHeader from './zujian/TodoHeader.vue'
import TodoMain from './zujian/TodoMain.vue'
import TodoFooter from './zujian/TodoFooter.vue'

export default {
  data(){
    return{
       
       list: JSON.parse(window.localStorage.getItem('showList')) || [
        { id: 100, name: "吃饭", isDone: true },
        { id: 201, name: "睡觉", isDone: false },
        { id: 103, name: "打豆豆", isDone: true },
      ],
      type:'',
      
    }
  },
  components:{
    TodoHeader,
    TodoMain,
    TodoFooter
  },
  methods:{
    addList(info){
      const obj={id:Date.now(),name:info,isDone:false}
      this.list.push(obj)
    },
    delList(index){
      this.list.splice(index,1)
    },
    changeList1(t){
      this.type=t
    },
    clearList(){
      // console.log(1);
      return this.list=this.list.filter(item=>{return item.isDone===false})
    }
  },
  computed: {
    showList(){
      if(this.type==='no'){
        return this.list.filter(item=>{return item.isDone===false })
        
      }else if(this.type==='yes'){
        return this.list.filter(item=>{return item.isDone===true})
      }else{
        return this.list
      }
    }
  },

 watch:{
    list:{
      deep:true,
      handler(newval){
         window.localStorage.setItem('showList',JSON.stringify(newval))
      }
    }
  }

}
</script>

<style>

</style>